<template>
	<view style="height: 100vh;background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/bg2.jpg');background-size: 100% 100%;">
		<view
			class="flex a-t j-t"
			style="width: 100%;padding-top: 40px;background:url(https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/bk.png) no-repeat; background-size: 47% 100%;background-position: 50%;"
		>
			<view
				style="width: 34px;padding: 10px 6px;border-radius: 30px;height: 150px;background: #fff;text-align: center;background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;color: #fff;"
			>
				{{ your_name || '你的名字' }}
			</view>
			<view
				style="width: 34px;padding: 10px 6px;border-radius: 30px;height: 150px;background: #fff;margin-left: 10px;text-align: center;background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;color: #fff;"
			>
				{{ ta_name || 'Ta的名字' }}
			</view>
		</view>
		<view style="text-align: center;font-size: 16px;color: #fff;">填写结缘姓名</view>
		<view class="flex a-t j-t" style="width: 100%;margin: 50px 0;color: #fff;">
			<input type="text" style="text-align: center;color: #fff;border: 1px solid #fff;padding: 4px 0" v-model="your_name" placeholder="我的名字" />
			-
			<input type="text" style="text-align: center;color: #fff;border: 1px solid #fff;padding: 4px 0" v-model="ta_name" placeholder="她的名字" />
		</view>
		<view style="text-align: center;font-size: 16px;color: #fff;">选择雕刻方式</view>
		<view class="flex a-t" style="box-sizing: border-box;padding: 0 20px;margin-top: 10px;">
			<view @click="left(1)"><u-icon name="arrow-left" color="#ffffff"></u-icon></view>
			<view style="width:280px;margin: auto;overflow: hidden;">
				<view class="flex a-t" :style="{ width: width + 'px' }">
					<view :class="index == 0 ? 'list1' : ''" v-for="(item, index) in bg" class="list" style="overflow: hidden;float: left;margin-right: 10px;position: relative;">
						<view
							@click="jiesuo(item, index)"
							class="mb"
							style="position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.5);color: #fff;font-size: 12px; top: 0;left: 0;text-align: center;;z-index: 1;background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/bk.png'); background-size: 100% 100%;"
						>
							<view style="line-height: 20px;margin-top: 20px;" :style="{ 'margin-top': index == 0 ? 30 + 'px' : 20 + 'px' }">{{ item.name }}</view>
							<view style="text-align: center;line-height: 20px">{{ item.price }}</view>
						</view>
						<image :src="item.icon_image" style="width:100%;" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view @click="left(2)"><u-icon name="arrow-right" color="#ffffff"></u-icon></view>
		</view>
		<view
			@click="all()"
			class="f14 cfff"
			style="width: 220px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 90px; left: 50%; margin-left: -110px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/191.png'); background-size: 100% 100%;height: 40px;color: #fff;"
		>
			立即刻上，缔结良缘
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bg: [],
			width: 0,
			your_name: '',
			ta_name: '',
			ieem: {}
		};
	},
	async onLoad() {
		this.ribg();
		uni.getProvider({
			service: 'oauth',
			success: function(res) {
				console.log(res.provider);
			}
		});

		const config = await this.$u.api.wxConfig({ apis: ['chooseWXPay'] });
		this.jWeixin.config({ ...config });
	},
	methods: {
		jiesuo(e, index) {
			this.ieem = e;
			let i2 = this.bg[index];
			this.bg.splice(index, 1);
			this.bg.unshift(i2);
		},
		async all() {
			let data = {
				my_space_id: this.vuex_user_content.id,
				your_name: this.your_name,
				ta_name: this.ta_name,
				stone_id: this.ieem.id
			};
			// #ifdef H5
			data.method = 'mp';
			// #endif
			let { pay_info } = await this.$u.apis.record(data);
			if (this.ieem.price != 0) {
				// #ifdef H5
				this.jWeixin.chooseWXPay({
					...pay_info,
					timestamp: pay_info.timeStamp,
					success: res => {
						console.info('支付成功。。。');
						console.info(res);
						// 支付成功后的回调函数
						uni.showToast({
							title: '付款成功'
						});
					},
					fail: err => {
						console.info('支付失败。。。');
						console.info(err);
					}
				});
				return;
				// #endif

				// #ifdef MP-TOUTIAO
				const param = {
					provider: 'toutiao',
					orderInfo: pay_info,
					service: 5
				};
				// #endif
				// #ifdef MP-WEIXIN
				const param = pay_info;
				// #endif
				uni.requestPayment({
					...param,
					success: res => {
						if (res.code == 0) {
							uni.showToast({
								title: '付款成功'
							});
						} else if (res.code == 4) {
							uni.showToast({
								title: '用户取消付款',
								icon: 'none'
							});
						}
					},
					fail: e => {
						uni.showToast({
							title: e.errMsg,
							icon: 'none'
						});
						// r(e);
					}
				});
			} else {
				uni.showToast({
					title: '刻画成功',
				});
                setTimeout(function () {
                    uni.navigateTo({
                        url: '/pages/sanshengshi/sanshengshi'
                    })
                }, 1800);

			}
		},
		async ribg() {
			let res = await this.$u.apis.index();
			this.bg = res;
			this.ieem = res[0];
			this.width = (res.length - 1) * 90 + 110;
			// this.bgimg=res[0].background_image
		},
		left(e) {
			if (e == 1) {
				let i1 = this.bg[0];
				this.bg.splice(0, 1);
				this.bg.push(i1);
			} else {
				let i2 = this.bg[this.bg.length - 1];
				this.bg.splice(this.bg.length - 1, 1);
				this.bg.unshift(i2);
			}
			this.ieem = this.bg[0];
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.list {
	width: 80px;
	height: 80px;
	line-height: 80px;
}
.list .mb {
	line-height: 80px;
}
.list1 {
	width: 100px;
	height: 100px;
	line-height: 100px;
}
.list1 .mb {
	line-height: 100px;
}
</style>
